<template>
    <div>
        <div style="margin-top: 15px;display: flex;justify-content: space-between;">
            <el-form :inline="true" :model="forObject" class="demo-form-inline" >
                <el-form-item>
                    <el-input v-model="forObject.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="_page">查询</el-button>
                    <el-button type="primary" icon="el-icon-bottom">高级搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <ElementTable ref="pageTable"
                          :pageColumns="pageColumns"
                          :optBtn="optBtn"
                          :btnList="btnList"
                          :optWidth=230
                          :url="url"
                          :formObject="forObject"
                          :loading="loading"
                          @optClick="optClick"
                          @btnListClick="btnListClick">

            </ElementTable>
        </div>

        <SysMenuEdit ref="refSysMenuEdit" @page="_page"></SysMenuEdit>
        <SysMenuBtn ref="refSysMenuBtn" @page="_page"></SysMenuBtn>

    </div>

</template>

<script>
    import ElementTable from '../../../components/base/ElementTable'
    import SysMenuEdit from './SysMenuEdit'
    import SysMenuBtn from './SysMenuBtn'
    import {deleteReq} from "../../../utils/api";
    export default {
        name: "UserManage",
        components:{
            ElementTable,
            SysMenuBtn,
            SysMenuEdit
        },
        mounted() {
            this._page()
        },
        data(){
            return{
                selectIds:[],
                forObject:{
                    name:undefined
                },
                url:'/api/sys_resource/page_vo',
                loading:true,
                pageColumns:[
                    {key:'name',title:'菜单名称',width:150},
                    {key:'url',title:'URL',width:200},
                    {key:'code',title:'编码',width:260},
                    {key:'parentName',title:'上级菜单',width:260},
                    {key:'status',title:'状态',width:160,yesNo:true},
                    {key:'pic',title:'图标',width:300},
                    {key:'remark',title:'备注',width:300}
                ],
                optBtn:[
                    {icon:'el-icon-edit',name:'编辑',id:'menu-sys-menu-edit'},
                    {icon:'el-icon-thumb',name:'按钮',id:'menu-sys-menu-btn'},
                    {icon:'el-icon-delete',name:'删除',id:'menu-sys-menu-delete'},
                ],
                btnList:[
                    {icon:'el-icon-plus',type:'success',name:'导入数据',id:'menu-sys-menu-bath-import'},
                    {icon:'el-icon-plus',type:'success',name:'导出数据',id:'menu-sys-menu-bath-export'},
                    {icon:'el-icon-plus',type:'primary',name:'新增菜单',id:'menu-sys-menu-bath-add'}
                ],

                getPage: {},
            }
        },
        methods:{
            optClick(data){
                switch (data.name) {
                    case '编辑':
                        break
                    case '按钮':
                        this.addBtn(data.obj)
                        break
                    case '删除':
                        this.deleteMenu(data.obj)
                        break
                    case 'selectData':
                        let ids = []
                        if (data.obj.length==0){
                            this.selectIds=[]
                        }else {
                            data.obj.forEach(function (item,value) {
                                ids[value]=item.id
                            })
                        }
                        this.selectIds = ids
                        break
                }
            },

            addBtn(data){
                this.$refs.refSysMenuBtn.open(data)
            },
            deleteMenu(data){
                this.$confirm('是否确认删除菜单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    deleteReq('/api/sys_resource/delete?id='+data.id,{}).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this._page()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            btnListClick(name){
                switch (name) {
                    case '新增菜单':
                        this.addMenu()
                        break
                }
            },


            _page(){
                this.$refs.pageTable.page()
            },
            addMenu(){
                this.$refs.refSysMenuEdit.open()
            }
        }
    }
</script>

<style scoped>

</style>